﻿@page "/components/tabs"

<DocsPage>
    <DocsPageHeader Title="Tabs" />
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader>
                <Title>Simple Tab</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true" Class="demo-tabs">
                <TabsSimpleExample />
            </SectionContent>
            <SectionSource Code="TabsSimpleExample" GitHubFolderName="Tabs" ShowCode="false" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Centered</Title>
                <Description>Use the <CodeInline>Centered prop</CodeInline> to keep your tabs in the middle.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <TabsCenteredExample />
            </SectionContent>
            <SectionSource Code="TabsCenteredExample" GitHubFolderName="Tabs" ShowCode="false" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Scrolling Tabs</Title>
                <Description>If the total size of all tabs excides the total size of the tabs container buttons will be added for scrolling.<br />With the <CodeInline>AlwaysShowScrollButtons</CodeInline> prop you can display the scroll buttons at all time.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <TabsScrollExample />
            </SectionContent>
            <SectionSource Code="TabsScrollExample" GitHubFolderName="Tabs" ShowCode="false" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Custom Scroll Icons</Title>
                <Description>The icons can be changed with the <CodeInline>PrevIcon</CodeInline> and <CodeInline>NextIcon</CodeInline> property.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <TabsCustomScrollIconsExample />
            </SectionContent>
            <SectionSource Code="TabsCustomScrollIconsExample" GitHubFolderName="Tabs" ShowCode="false" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Tabs Position</Title>
                <Description>The position of the tab toolbar can be changed with the <CodeInline>Position</CodeInline> property.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true" Class="demo-tabs">
                <TabsPositionExample />
            </SectionContent>
            <SectionSource Code="TabsPositionExample" GitHubFolderName="Tabs" ShowCode="false" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Icon Tabs</Title>
                <Description>Icons can be used in addition to regular text in the tabs.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <TabsIconAndTextExample />
            </SectionContent>
            <SectionSource Code="TabsIconAndTextExample" ShowCode="false" GitHubFolderName="Tabs" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>With Badges</Title>
                <Description>Badges can be be applied to both icons and texts in the same way.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <TabsWithBagdesExample />
            </SectionContent>
            <SectionSource Code="TabsWithBagdesExample" ShowCode="false" GitHubFolderName="Tabs" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Tooltip Tabs</Title>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <TabsToolTipExample />
            </SectionContent>
            <SectionSource Code="TabsToolTipExample" GitHubFolderName="Tabs" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Set Active Panel</Title>
            </SectionHeader>
            <SectionContent Outlined="true" FullWidth="true">
                <TabsSetActiveExample />
            </SectionContent>
            <SectionSource Code="TabsSetActiveExample" ShowCode="false" GitHubFolderName="Tabs" />
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>
